<template>
	<view>
		<!-- 订单中心 -->
		<view v-if="pageData.template == 1">
			<view class="card">
				<view class="title d-flex a-center" v-if="pageData.title">
					<view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
					<view class="color_82" @click="toUrl('/pages/index/orderList')"
						>查看全部订单</view
					>
					<text class="iconfont icon-xiangyouxiayiye h6 color_82"></text>
				</view>
				<view class="p-bot24">
					<view
						class="d-inline-block w-20 text-center p-top30"
						@click="toUrl('/pages/index/orderList')"
						v-if="!pageData.title">
						<image
							class="icon"
							:src="imgUrl + 'Uploads/diy/userCenter/mainOrder.png'"
							mode="aspectFit">
						</image>
						<view class="color_22 m-top12">我的订单</view>
					</view>
					<view
						class="d-inline-block w-20 text-center p-re"
						v-for="(item, index) in list1"
						:key="index"
						:data-num="orderCount[item.field]"
						:class="{ unread: parseInt(orderCount[item.field]) > 0 }"
						@click="toUrl('/pages/index/orderList?status=' + item.status)">
						<image
							class="icon"
							:src="staticUrl + '/images/jh_up/' + item.img"
							mode="aspectFit"></image>
						<view class="color_22 m-top12">{{ item.text }}</view>
					</view>
				</view>
			</view>

			<!-- 订单状态 -->
			<orderStatus></orderStatus>
		</view>

		<!-- 仓库中心 -->
		<view class="card" v-if="pageData.template == 2 && Result.warehouse_mode == 1">
			<view class="title size30 color_33 bold" v-if="pageData.title">{{
				pageData.title
			}}</view>
			<view class="p-bot24" :class="{ 'p-top30': !pageData.title }">
				<view
					class="d-inline-block w-20 text-center p-re"
					v-for="(item, index) in list2"
					:key="index"
					@click="toUrl(item.path)">
					<image class="icon" :src="item.img" mode="aspectFit"></image>
					<view class="color_22 m-top12">{{ item.text }}</view>
				</view>
			</view>
		</view>

		<!-- 分享赚钱 -->
		<view class="card" v-if="pageData.template == 3 && configJson.distributionMode != 0">
			<view class="title d-flex a-center" v-if="pageData.title">
				<view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
				<view class="d-flex a-center" @click="showShareQr = true">
					<image
						:src="$online('code.png')"
						mode="widthFix"
						class="code m-right10"></image>
					<view class="color_82">推广海报</view>
				</view>
			</view>
			<view class="p-bot24" :class="{ 'p-top30': !pageData.title }">
				<view
					class="d-inline-block w-20 text-center"
					v-for="(item, index) in list3"
					:key="index"
					@click="toUrl(item.path)">
					<image class="icon" :src="item.img" mode="aspectFit"></image>
					<view class="color_22 m-top12">{{ item.text }}</view>
				</view>
			</view>
		</view>

		<SharePoster
			v-if="showShareQr"
			myid=" "
			type="1"
			pageType="0"
			@closePoster="showShareQr = false"></SharePoster>

		<!-- 常用功能 -->
		<view class="card" v-if="pageData.template == 4">
			<view class="title size30 color_33 bold" v-if="pageData.title">{{
				pageData.title
			}}</view>
			<view :class="{ 'p-top30': !pageData.title }">
				<block v-for="(item, index) in finalList" :key="index">
					<!-- 特殊处理 -->
					<block v-if="item.path == '/userPage/distributors/fenxiaoCenter?state=0'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="configJson.distributionMode != 0 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<block v-else-if="item.path == '/answer/curriculum'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="Result.courseGoodsCount > 0 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<block v-else-if="item.path == '/userPage/user/aboutUs'">
						<view
							class="gridItem"
							@click="toUrl(item.path + '?listId=' + Result.about_us_list_id)"
							v-if="Result.about_us_list_id && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<block v-else-if="item.path == '/userPage/Install/Install'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="Result.isDispatchStaff == 1 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
							<!-- Result.isDispatchStaff_name -->
						</view>
					</block>
					<block v-else-if="item.path == '/privatePage/index/index'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="userinfo.is_private_member == 1 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<!--  1区域代理  2推荐分享关联 -->
					<!-- 销售代理-->

					<block v-else-if="item.path == '/joinPage/proxyStore'">
						<view
							class="gridItem"
							@click="toProxyStore(item)"
							v-if="userinfo.agent_id > 0 && userinfo.agent_type == '2' && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<!-- 区域代理商 -->
					<block v-else-if="item.path == '/joinPage/agentCenter'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="userinfo.agent_id > 0 && item.show && userinfo.agent_type == '1'">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>

					<block v-else-if="item.path == '/joinPage/installOrders'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="userinfo.is_dispatch_manager == 1 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
					<!-- 笑哈哈 -->
					<block v-else-if="item.path == '/userPage/xiaohaha/index'">
						<view
							class="gridItem"
							@click="toUrl(item.path)"
							v-if="Result.directSalesUid > 0 && item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>

					<block v-else>
						<view class="gridItem" @click="toUrl(item.path)" v-if="item.show">
							<image class="icon" :src="item.img" mode="aspectFit"></image>
							<view class="color_22 m-top12">{{ item.text }}</view>
						</view>
					</block>
				</block>

				<view
					class="gridItem"
					@click="open"
					v-if="Result.warehouse_mode == 1 && userinfo.refund_num > 0">
					<image
						class="icon"
						:src="imgUrl + 'Uploads/diy/userCenter/refund.png'"
						mode="aspectFit"></image>
					<view class="color_22 m-top12">退押金</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderStatus from '@/components/User/orderStatus.vue';
	import SharePoster from '@/components/sharePoster.vue';
	import { mapState, mapMutations } from 'vuex';

	const base = 'http://sraimgcdn2.mogoie.com/Uploads/diy/userCenter/';
	export default {
		props: ['pageData', 'orderCount', 'Result', 'userinfo', 'configJson'],
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				showShareQr: false,
				list1: [
					{
						text: '待支付',
						img: 'icon-daifukuan.png',
						status: 0,
						field: 'unpay',
					},
					{
						text: '待收货',
						img: 'icon-daifahuo.png',
						status: 3,
						field: 'delivery',
					},
					{
						text: '待评价',
						img: 'icon-daipingjia.png',
						status: 4,
						field: 'comment',
					},
					{
						text: '已评价',
						img: 'icon-yipingjia.png',
						status: 5,
					},
					{
						text: '退款/售后',
						img: 'icon-tuikuan.png',
						status: 6,
						field: 'refund',
					},
				],
				list2: [
					{
						text: '我的仓库',
						img: base + 'myRoom.png',
						path: '/warehouse/house',
					}, // noPayOrde['availableGoodsCount']
					{
						text: '待发货',
						img: base + 'unshipped.png',
						path: '/warehouse/house?status=3',
					},
					{
						text: '待收货',
						img: base + 'unreceived.png',
						path: '/warehouse/house?status=4',
					},
					{
						text: '已使用',
						img: base + 'used.png',
						path: '/warehouse/house?status=2',
					},
					{
						text: '赠送记录',
						img: base + 'giftRecord.png',
						path: '/warehouse/giftrecord',
					},
				],
				list3: [
					{
						text: '分销中心',
						img: base + 'distribution.png',
						path: '/userPage/distributors/fenxiaoCenter',
					},
					{
						text: '我的好友',
						img: base + 'friend.png',
						path: '/moneyPage/distributors/myFans',
					},
					{
						text: '分销订单',
						img: base + 'suborder.png',
						path: '/moneyPage/distributors/fenxiaoOrder',
					},
					{
						text: '佣金明细',
						img: base + 'commission.png',
						path: '/moneyPage/capital/brokerage_list',
					},
					{
						text: '去提现',
						img: base + 'withdraw.png',
						path: '/moneyPage/capital/withdraws',
					},
				],
				list4: [
					{
						text: '客服中心',
						img: base + 'service.png',
						path: 'customerService',
						show: true,
					},
					{
						text: '地址管理',
						img: base + 'address.png',
						path: '/orderPage/Addresslist/Addresslist',
						show: true,
					},
					{
						text: '分享赚钱',
						img: base + 'share.png',
						path: '/userPage/distributors/fenxiaoCenter?state=0',
						show: true,
					},
					{
						text: '我的预约',
						img: base + 'myReserve.png',
						path: '/pages/reserve/myRreserve',
						show: true,
					},
					{
						text: '我的评价',
						img: base + 'myReview.png',
						path: '/commentPage/comment/myComment',
						show: true,
					},
					{
						text: '我的课程',
						img: base + 'myCourse.png',
						path: '/answer/curriculum',
						show: true,
					},
					{
						text: '关于我们',
						img: base + 'aboutUs.png',
						path: '/userPage/user/aboutUs',
						show: true,
					},
					{
						text: '派单',
						img: base + 'dispatch.png',
						path: '/userPage/Install/Install',
						show: true,
					},
					{
						text: '私域运营',
						img: base + 'operation.png',
						path: '/privatePage/index/index',
						show: true,
					},
				],
			};
		},
		computed: {
			...mapState(['vid', 'startUp', 'bid']),
			finalList() {
				if (this.pageData.list) {
					return this.pageData.list;
				} else {
					return this.list4;
				}
			},
		},
		components: {
			orderStatus,
			SharePoster,
		},
		created() {
			// 数据处理
			if (this.pageData.template == 1) {
				if (this.startUp.delivery == 2) {
					this.list1[1].text = '待核销';
					this.list1[1].img = 'icon-daihexiao.png';
				}
				if (!this.pageData.title) this.list1.splice(3, 1);
			}
			if (this.pageData.template == 2 && !this.pageData.title) {
				this.list2[0].img = this.imgUrl + 'Uploads/diy/userCenter/mainRoom.png';
			}
		},
		methods: {
			...mapMutations(['setHomeKefu']),
			toUrl(url) {
				if (!this.vid) return this.$emit('openModal');
				if (url == 'customerService') return this.showKefu_();
				uni.navigateTo({
					url,
				});
			},
			showKefu_() {
				if (this.configJson.serviceImg) {
					this.toUrl('/userPage/user/introduce?type=2');
				} else {
					this.setHomeKefu({
						showKefu: true,
					});
				}
			},
			open() {
				this.$emit('openDeposit');
			},
			toProxyStore(Item) {
				if (this.bid == 'yI3mwcRcUPnmt*vTgh1bsA==') {
					this.toUrl(`/joinPage/proxyStore`);
				} else {
					this.toUrl(`/joinPage/proxyStore?agent_id=${this.userinfo.agent_id}`);
				}
			},
		},
		// watch: {
		// 	userinfo(newVal, old) {
		// 		console.log(newVal, 'newVal');
		// 	}
		// }
	};
</script>

<style lang="scss" scoped>
	.card {
		margin: 24rpx;
		border-radius: 12rpx;
		background-color: rgba(255, 255, 255, 0.6);

		.title {
			padding: 24rpx 24rpx 40rpx 24rpx;
		}

		.gridItem {
			display: inline-block;
			width: 20%;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.icon {
			width: 50rpx;
			height: 50rpx;
		}

		.code {
			width: 30rpx;
			background: #999;
		}
	}
</style>
